<template>
  <div class="">
    <el-card class="box-card">
      <el-row :gutter="0">
        <el-col :xs="24" :sm="18" :md="12">
          <el-form ref="ref" :model="model" :rules="rules" label-width="120px">
            <el-form-item label="Logo" prop="logo_url">
              <logo-upload :single-file="model.logo_file" :show-file-list="false" accept="image/jpeg, image/png" @uploadCallback="logoCallback"/>
              <span>jpg、png图片，200 x 200，小于 200 KB。</span>
            </el-form-item>
            <el-form-item label="Favicon" prop="favicon_url">
              <favicon-upload :single-file="model.favicon_file" :show-file-list="false" accept="image/jpeg, image/png, image/x-icon" @uploadCallback="faviconCallback"/>
              <span>jpg、png、ico图片，128 x 128，小于 100 KB。</span>
            </el-form-item>
            <el-form-item label="系统简称" prop="system_name">
              <el-input v-model="model.system_name" type="text"/>
            </el-form-item>
            <el-form-item label="页面标题" prop="page_title">
              <el-input v-model="model.page_title" type="text"/>
            </el-form-item>
            <el-form-item>
              <el-button :loading="loading" @click="refresh()">刷新</el-button>
              <el-button :loading="loading" type="primary" @click="submit()">提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import LogoUpload from '@/components/FileUpload'
import FaviconUpload from '@/components/FileUpload'
import {apiSetting} from '@/api/admin/common'

export default {
  name: 'AdminSettingSystem',
  components: {LogoUpload, FaviconUpload},
  data() {
    return {
      loading: false,
      model: {
        logo_url: '',
        logo_file: {},
        favicon_url: '',
        favicon_file: {},
        system_name: '',
        page_title: ''
      },
      rules: {}
    }
  },
  created() {
    this.info()
  },
  methods: {
    // 信息
    info() {
      apiSetting().then(res => {
        this.model = res.data
        this.updateSetting()
      })
    },
    // 刷新
    refresh() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 3000)
    },
    // 提交
    submit() {
      this.$refs['ref'].validate(valid => {
        if (valid) {
          this.loading = true
          apiSetting(this.model, 'post').then((res) => {
            this.updateSetting()
            this.loading = false
            this.$message.success(res.msg)
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    updateSetting() {
      this.$store.dispatch('settings/changeSetting', {key: 'systemName', value: this.model.system_name})
      this.$store.dispatch('settings/changeSetting', {key: 'pageTitle', value: this.model.page_title})
      this.$store.dispatch('settings/changeSetting', {key: 'logoUrl', value: this.model.logo_url})
      this.$store.dispatch('settings/changeSetting', {key: 'faviconUrl', value: this.model.favicon_url})
    },

    // 文件上传回调
    logoCallback(singleFile) {
      this.model.logo_file = singleFile
      this.model.logo_url = singleFile.url
    },
    faviconCallback(singleFile) {
      this.model.favicon_file = singleFile
      this.model.favicon_url = singleFile.url
    }
  }
}
</script>
